David Karlins
Introduction
Forms are arguably the single most valuable element of a website. They let you sell products and accumulate e-lists, and they let visitors search your site, order products, and do much more. In many ways, forms are the way you harvest content through your website.
So forms should be inviting and accessible . . . even fun! And yet, I'll bet if you surveyed a thousand people who spend a lot of time online, not many of them would list "filling out forms" as their favorite online activity.
In this lesson, you'll learn to use new features of HTML5 that make it easier, less stressful, and even fun to fill out forms. Those tools include:
There are some compatibility issues with HTML5 form properties. In the Supplementary Material, I've included information on HTML5 form property support within browsers. Almost all modern browsers support almost all HTML5 form properties, but that still leaves obsolete (but still installed) Internet Explorer 8 and earlier. And there may still be issues with some HTML5 form properties in newer browsers.
Here's how we'll approach this challenge: As much as possible, we won't rely on HTML5 form properties to make our forms work. Users with modern browsers will have an easier, more inviting experience filling out our form, but folks with IE 8 will still be able to use it.
Finally, I'll show you how to collect form data in a more professional way than the mail-to action we used in Lesson 6.
Let's get started by making it easier for your visitors to fill out forms.
Making It Easy to Fill Out Forms
The easier we make it to fill out a form, the more likely we are to entice visitors to use that form. HMTL5 provides two valuable tools that make forms less hassle:
Placeholder text provides clues as to what a user should enter into a form field. Datalists use what programmers often call "autocomplete." If a visitor begins to type something into a form that beings with the letter a, for instance, he or she can see a list of options that begin with that letter.
We'll return to these two techniques in just a moment, but first let's get our form set up.
Form Basics: A Quick Review
To keep things focused, let's create a basic form to test the new features in HTML5. Create a new document in your code editor, and save it as form2.html.
Use this code for the entire page, including the form:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Form2</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <form> <h1>Get on our e-list</h1> <p><input type="submit" value="Click here to submit the form"/> <input type="reset" value="Click here to reset the form"/></p> </form> </div> </body> </html>
Let's quickly review what's going on here:
Now we're ready to go!
Defining Placeholder Text
You can use placeholder text to supplement a form label, like this:
A form field supplemented with an HTML5 placeholder text
Or you can use placeholder text instead of a form label, like this:
A form field that relies on HTML5 placeholder text
The second technique is appropriate for pages that people will access only with modern browsers.
Here's the syntax for a form field with placeholder text, where fieldname is the input type (like text or email).
<input type="text" name="fieldname" placeholder="placeholder text">
And here's an example of how we can add to a placeholder text field to our form now:
<p><label for="name">Name:</label> <input type="text" name="name" placeholder="Your name or nickname here" size="48"></p>
Note that I included a few basic form techniques we discussed in the last lesson:
We're using HTML5 form properties as a supplement to old-school HTML. Folks with IE 8 will still see the form label, even if they don't get additional information in the placeholder.
Defining a Datalist
Datalists are similar to the select menus we explored in Lesson 6, but datalists can filter results. So if you ask a user to choose his or her country of origin from a list, you don't have to display a list of 200 or so countries. As soon as a user types an A, a list appears restricted to countries that begin with A. And when a user types a second letter, like L for example, the list shrinks to Albania and Algeria. This is more inviting and less cluttered than displaying long lists of options.
Another difference between a select menu and a datalist is that with a datalist, users can enter content that isn't on the list. That has advantages and disadvantages. If you want to constrain users to certain choices, stick with a select menu like the one we used in Lesson 6. But if you just want to make data entry less of a hassle for users and help those of us who are spelling-challenged, then a datalist is a good way to go.
Here's the syntax for a datalist:
<input list="list"> <datalist id="list"> <option value="first option"> <option value="second option"> <option value="third option"> </datalist>
And here's an example we can use:
<p><label for="countries">Where do you live?</label> <input list="countries"> <datalist id="countries"> <option value="Afghanistan"> <option value="Albania"> <option value="Algeria"> <option value="Andorra"> <option value="Angola"> <option value="Antigua and Barbuda"> <option value="Argentina"> <option value="Armenia"> <option value="Aruba"> <option value="Australia"> <option value="Austria"> <option value="Azerbaijan"> <option value="Alaska"> </datalist>
Okay, I cheated on that list. In real life we would have included all countries. But this is a class assignment, and I didn't want to use up all our time and space with the full list. I've included a link to that list in the Supplementary Material.
But this abbreviated list of countries is enough to experience the concept. When someone begins to type a state name, that person sees a prompt with a filtered list of options, like these:
Using an HTML5 datalist to make data entry easier
If you're working along with me, add this datalist after the name field in the form we're using for this lesson. Your form will look something like this:
Using a form with placeholder text and a datalist field
Now let's talk about another way to make it easy for your users to fill out your forms.
Using Form Output Elements
HTML5 form output elements perform calculations for a user. You can use them to create complex forms that more or less replicate calculators. I'll provide links to resources for that kind of application in the Supplementary Material.
The basic syntax for this kind of output element is:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> <input type="number" id="a">+ <input type="number" id="b">= <output name="x" for="a b"></output> </form>
This syntax does three things:
This example looks like this in a form (with values entered):
A form output element adding 2 plus 2
Warning!
You may have noticed that the output element is within a <form> element. The calculation takes place without a form being "submitted," and it takes place in a form of its own. Therefore, we'll place this element under the close </form> element for our main form. This will serve as a handy calculator on the page, but it won't be part of the same <form> element that users submit.
Let's customize the example to help a user quickly calculate how much money he or she might donate each month to our website project. Insert this code in your form, after the close </form> tag for the existing form:
<p><label for="oninput">How often do you visit this site monthly?</label></p> <form oninput="x.value=parseInt(a.value)*parseInt(b.value)"> <p><input type="number" id="a" placeholder="Visits/day"> * <input type="number" id="b" placeholder="Days you visit">= <output name="x" for="a b"></output> </form></p>
The output element should look something like this when a user enters two values:
Customizing an output element to multiply two user-entered values
In customizing the form, we tweaked the example. We changed the mathematical operator from "+" (add) to "*" (multiply). And we added a label and placeholder text.
The placeholder text makes this form much easier to understand. It looks like this before a user starts entering values:
Using placeholder text with an output element
Our form is getting friendly! We provided a helpful hint in the Name field and a list of pre-typed options for the Country field. But there are even more powerful form properties in HTML5, so head over to Chapter 3 to explore those.
Understanding HTML5 Field Types
HTML5 field types make it easy (and fun) to enter values in a form, and they validate form input. Before we get to the fun part, let's quickly scan a list of HTML5 field types:
These field types correspond to the type of data you're collecting. The color field type, for example, displays a color picker for users. The date field type lets visitors choose a date from a pop-up calendar. Not all HTML field types are that interactive, but all of them, in one way or another, make it easier for users to input data.
The basic syntax is:
<input type="type" name="name">
Let's look at two of the best examples of how HTML5 displays intuitive, helpful (and yes, sometimes fun) ways to enter different kinds of data: date and color.
Those of us who are past a certain age dislike having to reveal our birthdays. But that can be painless with HTML5 field types. Here's an example of collecting that information with an HTML5 date field type:
<p><label for="date">What's your birthday?</label> <input type="date" name="birthday"></p>
Collecting a date in an HTML5 form
How do you ask someone to provide a color? HTML5 makes it easy to collect accurate color data, and I think this qualifies as fun as well. Visitors can use a variety of color systems to enter colors if they know a color value in RGB values.
Here's an example of a color field type combined with a date field type:
<p><label for="color">Please choose the color shirt you wish to order</label> <input type="color" name="shirt-color"></p>
Collecting a color value in an HTML5 form
Everybody makes mistakes, and some users will probably make errors even when answering simple questions like these. Let's talk about what you can do to painlessly correct these errors.
Why Validation Matters
HTML5 form fields have built-in validation properties. In other words, they check data before submitting it and alert your visitor if there are problems. Before we examine how those work, let's step back for a second and survey what validation is and how it works.
Form validation means testing form data before that data goes to a server. For example, what if we're asking a user to tell us the year in which he or she was born, and the user enters a value of 25? The user probably misunderstood and entered his or her age instead of birth year. A validation test might require that the field have a maximum value of 1900 to screen out entries that don't seem to make sense.
There are three ways to validate form data:
All these techniques have advantages and disadvantages. JavaScript validation works in old versions of Internet Explorer. Server-side scripts also work in any browser, but they're slower since the data has to go to a server for validation.
HTML5 validation is much easier to implement since it doesn't require any scripting beyond our HTML5 coding skills. Also, it's fast, since validation takes place in a browser. The downside is that not every browser supports validation, although all modern browsers support most validation rules. Using HTML5 form field validation complies with our approach of avoiding HTML5 elements that render a page dysfunctional in old versions of Internet Explorer. Users of these browsers won't get their form content checked before submission, but they can still submit forms.
Adding Required Fields
The simplest and perhaps most useful HTML form field validation property is required.
Here's an example of applying the required parameter to the Name field in the form we've been working on:
<input type="text" name="name" placeholder="Your name or nickname here" size="48" required>
Adding a required property forces users to enter something in a field. If they don't, they see an error message like this after submitting the form:
An error message indicating that a field needs filling out
I'm sure you can see how helpful the required property is. Using it means you're much less likely to receive forms that are missing crucial information, such as credit card numbers or shipping addresses.
Using Email Validation
We've already talked about how the HTML5 color and date field types provide user-friendly tools for entering data. Other HTML5 field types don't have any special display properties; they're mainly for validation. The email type, for example, requires that anything the user enters in that field must look like an email address.
You can test this by adding the following after the name field:
<p><label for="email">Email:</label> <input type="email" name="email" placeholder="Your email here (required)" size="48" required></p>
Then test the field by entering something that doesn't look like an email address and clicking Submit. Error messages vary by browser, but your result should look something like this:
An error message indicating that the content doesn't look like an email address
Including Number Validation
Let's take another example—number validation. The number type field will accept number values only (written with numerals, not text like "twenty-five").
To define a number type field for validation purposes, add this code after the email field:
<p><label for="quantity">How many shirts do you wish to order?</label> <input type="number" name="quantity"></p>
An error message indicating the content of a field isn't a number
The number type field can do more than provide validation. In many browsers, the number type field displays with a stepper or slider, depending on the browsing environment.
HTML5 validation can get even more complex than the examples we've looked at here. But between making a field required, defining an email field type, and requiring a number value, you can ensure that users aren't submitting information that will be useless to you and to them.
Before you head off to Chapter 4, this is a good time to save your form2.html page. We're going to work with a different form in the next chapter, where we combine an input form with a server-side script to manage form data.
This video shows how you can apply what you've learned in this chapter to form.html from the previous lesson.
This is your instructor, David Karlins, and in this video, I'm reviewing what we've done to add placeholders and also validation elements to our form field.
So I'm looking now at the code for my name element. And you'll see we added two substantial things. Yes, we made the size wider. But we also added placeholder text. And we made this element required. So let's see how that works out in a browser.
If I go back to my form in my browser, and I refresh the browser, I now have text prompting me to give me a little advice on how to fill out this form field. So I'll enter my name here, and again an email address.
Actually, let me try not entering my name here, and see what happens. If I try and submit the form, I get a validation message. And I'm in Chrome, so that's native to Chrome. They appear differently in different browsers.
end transcript
Managing Form Data With Server-Side Scripts
In Lesson 6, we used the simplest way to collect form data. The mail-to action sends form data to an email address by launching the user's own email client.
More complex and more professional techniques for managing data rely on server-side scripts. By server-side, I mean the scripts are on your hosting server. Data goes to the server for processing using programs that run in the server, not in the user's computer.
Server-side scripts range from simple to complex. I mentioned a few server-side scripting languages in the last lesson—they include Ruby, PERL, and ASP. If you take the PHP/MySQL courses that my colleagues teach, you'll learn to set up an entire back-end system using the PHP scripting language to manage input data, and you'll create MySQL databases to save and organize that data. (If you're interested in these courses, I'll provide descriptions of them in Lesson 12, Chapter 5.)
That level of server-side scripting is beyond the scope of this class. Instead, we'll use a helpful, free online resource to generate a server-side script.
Generating HTML and PHP at TheSizeWizard
There are a number of online resources for generating server-side scripts and matching forms. These resources always provide HTML for a form and PHP for the script because the form elements have to match the scripting, or the data won't process properly. In other words, if your form has a field named "email," the script needs to know that.
The forms and scripts available from TheSizeWizard are editable, but we'll stick with the default settings. That means we'll get an HTML form from TheSiteWizard that collects feedback and serves as a signup form. That form includes tables—a design technique that advanced Web designers avoid, but it's something we can live with. And if you wish, you can edit the HTML from TheSizeWizard to replace tables with div tags for design.
Creating the Three Files We Need
Like many useful PHP scripts, the one we get from TheSiteWizard will require three HTML files:
So let's create those now. Use the following HTML to create and save a feedback file:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Feedback</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <h1>Please share your feedback</h1> </div> </body> </html>
Save that file as feedback.html.
Next, create and save an error.html file with this code:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Feedback</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <h1>Sorry, there was an error in your submitted form</h1> <h2>Please press your browser's Back button to return to the form</h2> </div> </body> </html>
Finally, create and save a file called thankyou.html that has this HTML:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Feedback</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <h1>Thanks for submitting your form</h1> <h2>Click <a href="index.html"> here</a> to return to our home page</h2> </div> </body> </html>
With those three files saved to your class site folder, we're ready to generate some PHP!
Note Your Site's Web Address
Before we generate some PHP, it's important to note the URL for your website. Your PHP file won't work on local computers. You have to upload it to your server in order to test it.
Generating PHP
Follow these steps to generate a form and a PHP file to manage form data:
Choosing PHP as a scripting language
Supplying the URL for the feedback page
Copying the HTML for the feedback form
Testing the Feedback Form and Script
To test the script, open your feedback.html page in a browser. Remember, you can't test this page on your local computer; you have to use the version you uploaded to the server.
Try entering some feedback in the form.
Testing the feedback form
Click Send Feedback, and see if the Thank You message works.
Testing the Thank You page
Try submitting the form without any data in any of the fields to test the error page.
Testing the Error page
How did you do? Feel free to ask me questions in the Discussion Area if you had any difficulties.
Summary
In this lesson, we used HTML5 form element properties to make forms inviting, accessible, and even fun. The most important of these HTML5 input types are:
HTML5 form elements are underrated. They provide tools that used to require major coding in JavaScript or Flash to produce—like calendars for date fields, color pickers for color fields, and validation rules to test data before it goes to a server.
You also learned to generate and use a server-side script. We only covered the basics of this topic, but you learned several things:
Again, if server-side scripting piques your interest, consider a PHP/MySQL class. If not, check out the server-side scripting options and links in the Supplementary Material.
In Lesson 8, we'll cover one of the best features of HTML5: semantic markup. You'll try your hand at using code that describes the content of the material you're posting—whether it's an article, a sidebar, or a navigation area, for instance. While Google and Bing don't release the technology used to index pages in their search engines, most experts expect that search engines will incorporate semantic markup as part of their page-ranking systems, so it's important to master it.
This article gets regular updates to show current browser support for new HTML5 elements. You can jump to the Form Elements and Attributes section to read about form elements.
The U.S. State Department maintains this updated list of all countries. It's handy for populating HTML5 datalists.
Here's the W3Schools tutorial on the output element. It's a simple, easy-to-follow introduction to building calculation into forms.
The HTML5 Doctor's output element tutorial shows how to create complex calculations in a form field.
This article discusses why error messages look so ugly and how to improve their design.
MailChimp provides a powerful signup form and email generator package, and the first 500 names are free.
Freefind provides free, Google-style search boxes for your site that are easy to customize.
Q: When is it appropriate to use placeholder text instead of a label?
A: When you're certain all your visitors have browsers that support new features in HTML5. For instance, if you're designing for mobile devices, they all support new HTML5 form fields. Q: How do I know if visitors to a page are using a mobile device?
A: In the last lessons of this class, we'll explore how to divert mobile users to special styles or pages.
I'd like you to build and upload a working form with at least three of these features:
Whatever form you create, please share a link to your uploaded page in the Discussion Area. Feel free to ask questions if you run into problems.
Back to top